<template>
  <right-template :title="componentData.title" :tabName="componentData.tabName">
    <el-form class="right-notice-bar margin-bottom-10">
      <dropdown-normal label="通知栏模式" :valLists="NOTICE_BAR_MODE" v-model="commonAttr.mode" @change="onChangeAttr"></dropdown-normal>
      <switch-normal v-model="commonAttr.isScrollable" label="滚动" @change="onChangeAttr"></switch-normal>
      <div v-if="commonAttr.isScrollable == false">
        <switch-normal v-model="commonAttr.isWrapable" label="多行展示" @change="onChangeAttr"></switch-normal>
      </div>
      <input-normal label="文本" v-model="commonAttr.text"  @change="onChangeAttr"></input-normal>
      <dropdown-normal  class="margin-top-10" :label="'字体'" :valLists="fontFamilys" v-model="styles.fontFamily" @change="onChangeAttr"></dropdown-normal>
      <slider-normal v-model="commonAttr.fontSize" label="字号" :max="60" :step="1" @change="onChangeAttr"></slider-normal>
      <color-normal v-model="commonAttr.color" :label="'字体颜色'" :format="'rgb'" @change="onChangeAttr"></color-normal>
      <color-normal v-model="commonAttr.backgroundColor" :label="'背景颜色'" :format="'rgb'" @change="onChangeAttr"></color-normal>
      <slider-normal v-model="commonAttr.lineHeight" :label="'行高'" :max="6" :step="0.1" @change="onChangeAttr"></slider-normal>
      <slider-normal v-model="commonAttr.letterSpacing" :label="'字距'" :max="20" :step="1" @change="onChangeAttr"></slider-normal>
    </el-form>
  </right-template>
</template>

<script>
  import RightTemplate from '@/views/child/right/right-template.vue'

  import ColorNormal from '@/views/components/edit/ColorNormal.vue'
  import DropdownNormal from '@/views/components/edit/DropdownNormal.vue'
  import SliderNormal from '@/views/components/edit/SliderNormal.vue'
  import InputNormal from '@/views/components/edit/InputNormal.vue'
  import SwitchNormal from '@/views/components/edit/SwitchNormal.vue'

  import { editUtils } from '@/views/js/edit-utils'
  import { NOTICE_BAR_MODE } from '@/common/const'


  export default {
    name: "RightNoticeBar",
    mixins: [editUtils],
    setup () {
      return {
        NOTICE_BAR_MODE:NOTICE_BAR_MODE
      }
    },
    components: {
      RightTemplate,
      InputNormal,
      ColorNormal,
      DropdownNormal,
      SliderNormal,
      SwitchNormal,
    },
  }
</script>
